<template>
	<view class="myPage">
		<view class="myPage_hd">
			<image class="myPage_hd_bg" src="../../static/image/myPageHd.png"></image>
			<view class="myPage_hd_main">
				<view class="myPage_hd_l">
					<image src="../../static/image/headImg.png" mode="aspectFill"></image>
				</view>
				<view class="myPage_hd_r">
					<view class="myPage_hd_r_t">
						<view class="myPage_hd_r_t_a">欧阳夏夏</view>
						<view class="myPage_hd_r_t_b">会员</view>
					</view>
					<button class="myPage_hd_r_b" open-type="getPhoneNumber">绑定手机号</button>
				</view>
			</view>
		</view>
		<view class="myPage_list">
			<view class="myPage_item">
				<image src="../../static/image/myPage1.png"></image>
				<text class="myPage_item_desc">我的卡包</text>
			</view>
			<view class="myPage_item">
				<image src="../../static/image/myPage2.png"></image>
				<text class="myPage_item_desc">品牌故事</text>
			</view>
			<view class="myPage_item">
				<image src="../../static/image/myPage3.png"></image>
				<text class="myPage_item_desc">隐私协议</text>
			</view>
			<view class="myPage_item">
				<image src="../../static/image/myPage4.png"></image>
				<text class="myPage_item_desc">免责声明</text>
			</view>
		</view>
		<view class="common_tabbar_border"></view>
	</view>
</template>

<script>
</script>

<style>
	.myPage{
		min-height:100vh;
		position: relative;
		padding: 0 0 20rpx;
		background-color: #fff;
	}
	.myPage_hd{
		height:377rpx;
		position: relative;
	}
	.myPage_hd_bg{
		height:377rpx;
		width: 100%;
		position: absolute;
		top:0;
		z-index: 0;
	}
	.myPage_hd_main{
		height:377rpx;
		display: flex;
		align-items: center;
		position: relative;
		padding-top: 120rpx;
	}
	.myPage_hd_l{
		border:4rpx solid #d2cdcc;
		height:136rpx;
		width:136rpx;
		border-radius: 68rpx;
		margin:0 36rpx;
		overflow: hidden;
	}
	.myPage_hd_l image{
		height:100%;
		width:100%;
	}
	.myPage_hd_r{
		flex:1;
		padding-bottom: 20rpx;
	}
	.myPage_hd_r_t{
		height:80rpx;
		overflow: hidden;
	}
	.myPage_hd_r_t_a{
		float: left;
		line-height: 80rpx;
		color: #fff;
		font-size: 36rpx;
	}
	.myPage_hd_r_t_b{
		float: left;
		padding: 0 25rpx;
		height:32rpx;
		line-height: 32rpx;
		background-color: #2860af;
		text-align: center;
		color: #fff;
		border-radius: 16rpx;
		margin-left:20rpx;
		margin-top:25rpx;
		font-size: 20rpx;
		letter-spacing: 8rpx;
	}
	.myPage_hd_r_b{
		padding: 0 20rpx;
		height:48rpx;
		line-height: 48rpx;
		display: inline-block;
		background-color: #feb64d;
		text-align: center;
		color: #fff;
		border-radius: 24rpx;
		font-size: 25rpx;
	}
	.myPage_list{
		padding-top: 40rpx;
	}
	.myPage_item{
		height:120rpx;
		line-height:119rpx;
		display: flex;
		align-items: center;
		border-bottom:1rpx solid #efefef;
	}
	.myPage_item image{
		height:40rpx;
		width:40rpx;
		margin:0 40rpx 0 50rpx;
	}
	.myPage_item_desc{
		flex:1;
		font-size: 28rpx;
	}
</style>
